<template>
	<div class="order_list">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="订单号">
					<el-input style="width:220px" v-model="searchForm.orderNo" placeholder="请输入订单号" clearable></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="searchForm.receivingName" placeholder="请输入用户名" clearable></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="searchForm.receivingMobile" placeholder="请输入手机号" clearable></el-input>
				</el-form-item>
				<el-form-item label="风控姓名">
					<el-input v-model="searchForm.riskName" placeholder="请输入风控姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="风控手机号">
					<el-input v-model="searchForm.riskMobile" placeholder="请输入风控手机号" clearable></el-input>
				</el-form-item>
				<el-form-item label="创建时间">
					<my-date-picker ref="myDatePicker"></my-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
					<el-button v-if="$hasMethod('#export')" size="small" type="warning" @click="exportFile()">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider></el-divider>
		<div class="child_page">
			<el-tabs class="flex-1 nav_tabs" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane v-for="item in tabList" :key="item.id" :label="`${item.name}(${item.count})`"
					:name="item.id"></el-tab-pane>
			</el-tabs>
			<div class="list_wrap">
				<div class="flex list_header">
					<p style="width:27%;padding-left:20px">商品信息</p>
					<p class="text-center" style="width:3%">数量</p>
					<p class="text-center" style="width:10%">租金</p>
					<p class="text-center" style="width:9%">租期</p>
					<p class="text-center" style="width:8%">押金</p>
					<p class="text-center" style="width:15%">实付金额</p>
					<p class="text-center" style="width:5%">是否买断</p>
					<p class="text-center" style="width:7%">下期付款金额</p>
					<p style="width:16%;padding-left:20px">收货人信息</p>
				</div>
				<div v-for="item in tableData" :key="item.id" class="list_item">
					<div class="flex justify-between align-center item_header">
						<el-tag :type="getOrderStatusType(item.status)">{{item.statusName}}</el-tag>
						<div class="flex-1 flex align-center">
							<p>ID：{{item.id}}</p>
							<p>创建时间：{{item.create_time}}</p>
							<p>订单号：{{item.trade_no}}</p>
							<p class="sign_icons">
								<el-tooltip class="item" effect="dark" content="承租人合同签署中" placement="top-start">
									<img v-if="item.guarantee_status==1" src="../../assets/images/db-signing.png" alt="承租人合同签署中" />
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="承租人合同已签署" placement="top-start">
									<img v-if="item.guarantee_status==2" src="../../assets/images/db-signed.png" alt="承租人合同已签署" />
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="承租人合同未签署" placement="top-start">
									<img v-if="item.guarantee_status!=1&&item.guarantee_status!=2" src="../../assets/images/db-unsign.png"
										alt="承租人合同未签署" />
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="合同未签署" placement="top-start">
									<img v-if="item.sign_status!=1&&item.sign_status!=2" src="../../assets/images/unsign.png"
										alt="合同未签署" />
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="合同签署中" placement="top-start">
									<img v-if="item.sign_status==1" src="../../assets/images/signing.png" alt="合同签署中" />
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="合同已签署" placement="top-start">
									<img v-if="item.sign_status==2" src="../../assets/images/signed.png" alt="合同已签署" />
								</el-tooltip>
								<!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="续租订单"
                  placement="top-start"
                >
                  <img
                    v-if="item.status==51"
                    src="../../assets/images/renew.png"
                    alt="续租订单"
                  />
                </el-tooltip> -->
							</p>
							<p>订单来源：{{item.source}}</p>
							<p>快递信息：
								<span class="blue-font pointer" @click="checkLogistics(item.id)">
									{{item.logistic.delivery_type==2?'上门自取':item.logistic.delivery_type==3?'上门安装':item.logistic.logistics_no?`${item.logistic.logistics_no}(${item.logistic.logistics_name})`:'无'}}
								</span>
							</p>
						</div>
						<p>
							<!-- <el-button
                type="primary"
                size="mini"
              >订单设置</el-button> -->
						</p>
					</div>
					<div class="flex item_row">
						<div class="flex" style="width:27%">
							<el-image style="width:100px;height:100px" :src="item.imgurl?$globalObj.imgBaseUrl+item.imgurl:''">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
							<div class="flex-1" style="padding-left:10px;overflow:hidden;">
								<p class="text-ellipsis title blue-font">{{item.goods_title}}</p>
								<p class="meal">套餐信息：{{item.setmeal_title}}</p>
								<p class="device">设备编号：{{item.device_number}}
									<el-button v-if="$hasMethod('#editDevice')" size="mini" class="border-btn" style="margin-left:5px"
										@click="editDevice(item)">更改</el-button>
								</p>
							</div>
						</div>
						<div class="flex flex-center color-666 font-16" style="width:3%;">x{{item.amount}}</div>
						<div class="flex flex-column flex-center" style="width:10%">
							<p class="red-font">￥{{item.rent_total}}(共{{item.month_total}}期)</p>
							<!-- <p class="color-666">￥{{(item.rent_total/item.month_total).toFixed(2)}}({{item.month_total}}期)</p> -->
							<p style="margin-top:10px">
								<el-button v-if="$hasMethod('#checkLease')" size="mini" class="border-btn"
									@click="viewLease(item.id)">查看租期</el-button>
							</p>
						</div>
						<div style="width:9%" class="color-666 font-12 flex flex-center">
							{{item.begin_time}}至{{item.end_time}}(共{{item.month_total}}期)
						</div>
						<div style="width:8%" class="flex flex-column flex-center">
							<p class="red-font" v-if="item.rights_auth_no">￥{{item.foregift}}</p>
							<p class="color-999 font-12">
								{{!item.rights_auth_no?'未授权免押':item.foregift_deduct==0?'押金冻结':item.foregift>0?'部分免押':'押金全免'}}</p>
							<p class="color-999 font-12" style="text-decoration:line-through;" v-if="item.foregift_deduct>0">
								￥{{parseFloat(item.foregift)+parseFloat(item.foregift_deduct)}}</p>
						</div>
						<div style="width:15%" class="flex flex-column flex-center">
							<p class="red-font">￥{{item.lease.paid_rent}}</p>
							<p class="color-999 font-12">
								{{item.pay_type==1?'智能合同代扣':item.pay_type==2?'芝麻信用（'+(item.rights_auth_no?'已授权代扣':'未授权代扣')+'）':'花呗'}}
							</p>
							<p style="margin-top:5px">
								<el-button size="mini" type="success" class="long-text-btn"
									@click="checkPaidBill(item.id, item.lease.paid_rent)">已付：￥{{item.lease.paid_rent}}/￥{{item.rent_total}}</el-button>
							</p>
							<p style="margin-top:5px">
								<el-button size="mini" type="warning">已结租金￥{{item.lease.settle_amount}}</el-button>
							</p>
						</div>
						<div style="width:5%" class="flex flex-center font-12 color-666">{{item.is_buy_out==1?'可买断':'不可买断'}}</div>
						<div style="width:7%" class="flex flex-column flex-center">
							<template v-if="JSON.stringify(item.lease.next)!=='[]'">
								<p class="font-12 color-666">￥{{item.lease.next.amount}}</p>
								<p class="font-12 color-666">{{item.lease.next.date}}</p>
							</template>
						</div>
						<div style="width:16%">
							<p class="flex align-center justify-between font-12 color-666">
								<span>{{item.realname}}</span>
								<span>{{item.address_mobile}}</span>
							</p>
							<p class="font-12 color-666" style="word-break:break-all;">{{item.prov+item.city+item.area+item.address}}
							</p>
							<p style="margin-top:10px">
								<el-button v-if="$hasMethod('#editAddress')" size="mini" class="border-btn"
									@click="editAddress(item)">修改地址</el-button>
							</p>
						</div>
					</div>
					<div class="flex item_row">
						<div style="width:57%" class="detail">
							<p class="color-666">
								认证资料：{{item.cert_name}}（{{item.cert_no}}）手机号：{{item.mobile}}，人脸识别{{item.authentic.status==1?'通过':'不通过'}}
								性别：{{item.authentic.sex}} 年龄：{{item.authentic.age}}
								<el-button v-if="item.idcard_back&&item.idcard_front&&$hasMethod('#checkAuthInfo')" size="mini"
									class="border-btn" @click="checkAuthInfo(item)">认证资料</el-button>
							</p>
							<p class="color-666" :class="{'red-font':item.is_skip==1}">
								风控信息：{{item.is_skip==1?'【未风控】商家跳过风控':item.risk}}
								<el-button v-if="item.is_skip==1" size="mini" class="border-btn" @click="openTip">手动风控</el-button>
							</p>
							<p class="color-666 font-12">用户备注：{{item.remark}}</p>
							<p class="color-666 font-12">客服备注：
								<template v-if="JSON.stringify(item.orderRemark)!=='[]'">
									{{item.orderRemark.create_time}}，{{item.orderRemark.username}}添加备注：{{item.orderRemark.remark}}
									<span v-if="$hasMethod('#checkRemark')" class="blue-font pointer" style="margin-right:10px"
										@click="viewRemark(item.id)">查看备注记录</span>
								</template>
								<el-button v-if="$hasMethod('#addRemark')" size="mini" class="border-btn"
									@click="addRemark(item.id)">添加备注</el-button>
							</p>
							<p class="color-666" style="margin-top:5px">
								<template v-if="JSON.stringify(item.leaseFlow)!=='[]'">
									第{{item.leaseFlow.which_period}}期通过支付宝{{item.leaseFlow.pay_type==1?'智能合同代扣':item.leaseFlow.pay_type==2?'芝麻信用':item.leaseFlow.pay_type==3?'花呗':'主动支付'}}{{item.leaseFlow.status==1?'支付'+item.leaseFlow.rent+'元':item.leaseFlow.status==2?'退款'+item.leaseFlow.rent+'元':item.leaseFlow.status==3?'买断':'未支付'}}
								</template>
								<el-button v-if="$hasMethod('#checkFlow')" size="mini" class="border-btn"
									@click="viewFlow(item.trade_no)">流水记录</el-button>
							</p>
						</div>
						<div style="width:43%" class="flex flex-column justify-center">
							<p v-if="item.orderRefundReason" style="padding:0 10px">退款原因：{{item.orderRefundReason}}</p>
							<p class="btns flex align-center">
								<el-button v-if="item.status==10&&$hasMethod('#delivery')" size="mini" type="warning"
									@click="openDelivery(item.id)">订单发货</el-button>
								<el-button v-if="item.status==20&&$hasMethod('#receipt')" size="mini" type="warning"
									@click="confirmReceipt(item.id)">确认收货</el-button>
								<el-button v-if="item.status==44" size="mini" type="warning">确认归还</el-button>
								<el-button v-if="item.status==45" size="mini" type="warning">归还完成</el-button>
								<el-button
									v-if="[20,30,40,44,45,60,61,62,11,12,13,14,15,16].indexOf(item.status)>-1&&$hasMethod('#checkLogistics')"
									size="mini" type="primary" @click="checkLogistics(item.id)">查看物流</el-button>
								<el-button
									v-if="[3,10,20,30,39,40,44,45,60,61,62,11,12,13,14,15,16].indexOf(item.status)>-1&&item.pact_url!=0"
									size="mini" type="primary" @click="checkPact($globalObj.imgBaseUrl+item.pact_url)">查看合同</el-button>
								<el-button v-if="[11,12,13,14].indexOf(item.status)>-1" size="mini" type="warning"
									@click="handleRefundOrder(item.trade_no)">去处理</el-button>
							</p>
						</div>
					</div>
				</div>
			</div>
			<custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
		</div>
		<check-lease ref="checkLease" :order-id="selectedId"></check-lease>
		<set-address ref="setAddress" :edit-item="editItem" @getList="getList"></set-address>
		<set-device ref="setDevice" :edit-item="editItem" @getList="getList"></set-device>
		<set-remark ref="setRemark" :order-id="selectedId" @getList="getList">
		</set-remark>
		<check-remark ref="checkRemark" :order-id="selectedId"></check-remark>
		<check-flow ref="checkFlow" :order-no="selectedId"></check-flow>
		<delivery ref="delivery" :order-id="selectedId" @getList="getList"></delivery>
		<receipt ref="receipt" :order-id="selectedId" @getList="getList"></receipt>
		<auth-info ref="authInfo" :edit-item="editItem"></auth-info>
		<check-bill ref="checkBill" :order-id="selectedId"></check-bill>
		<check-logistics ref="checkLogistics" :order-id="selectedId"></check-logistics>
	</div>
</template>
<script>
	import globalData from "../../utils/global";
	import customPage from "@/components/customPage";
	import myDatePicker from "@/components/myDatePicker";
	import {
		orderBuyOutList,
		orderBuyOutListExport
	} from "@/api/order";
	import checkLease from "./dialogs/checklease";
	import setAddress from "./dialogs/setAddress";
	import setDevice from "./dialogs/setDevice";
	import setRemark from "./dialogs/setRemark";
	import checkRemark from "./dialogs/checkRemark";
	import checkFlow from "./dialogs/checkFlow";
	import delivery from "./dialogs/delivery";
	import receipt from "./dialogs/receipt";
	import authInfo from "./dialogs/authInfo";
	import checkBill from "./dialogs/checkBill";
	import checkLogistics from "./dialogs/checkLogistics";
	export default {
		components: {
			myDatePicker,
			customPage,
			checkLease,
			setAddress,
			setDevice,
			setRemark,
			checkRemark,
			checkFlow,
			delivery,
			receipt,
			authInfo,
			checkBill,
			checkLogistics
		},
		data() {
			return {
				searchForm: {
					orderNo: '',
					goodsName: '',
					receivingName: '',
					receivingMobile: '',
					riskName: '',
					riskMobile: '',
					orderCreateTime: ''
				},
				statusList: globalData.orderStatus,
				total: 0,
				tableData: [],
				activeName: 'all',
				tabList: [{
					id: 'all',
					name: '全部订单',
					count: 0
				}],
				selectedId: '',
				editItem: {}
			}
		},
		methods: {
			openTip() {
				this.$alert('商家暂未开启风控', '提示', {
					confirmButtonText: '确定',
				}).then(() => {});
			},
			handleRefundOrder(tradeNo) {
				this.$router.push({
					name: 'refundList',
					params: {
						tradeNo
					}
				});
			},
			// 查看合同
			checkPact(url) {
				window.open(url);
			},
			// 查看物流
			checkLogistics(id) {
				this.selectedId = id;
				this.$refs.checkLogistics.dialogVisible = true;
			},
			// 查看已付账单详情
			checkPaidBill(id, paid_rent) {
				if (this.$hasMethod('#checkBill') && paid_rent > 0) {
					this.selectedId = id;
					this.$refs.checkBill.dialogVisible = true;
				}
			},
			// 查看认证资料
			checkAuthInfo(item) {
				this.editItem = {
					idcard_back: item.idcard_back,
					idcard_front: item.idcard_front
				}
				this.$refs.authInfo.dialogVisible = true;
			},
			// 确认收货
			confirmReceipt(id) {
				this.selectedId = id;
				this.$refs.receipt.dialogVisible = true;
			},
			// 订单发货
			openDelivery(id) {
				this.selectedId = id;
				this.$refs.delivery.dialogVisible = true;
			},
			// 查看流水记录
			viewFlow(trade_no) {
				this.selectedId = trade_no;
				this.$refs.checkFlow.dialogVisible = true;
			},
			// 查看客服备注
			viewRemark(id) {
				this.selectedId = id;
				this.$refs.checkRemark.dialogVisible = true;
			},
			// 添加客服备注
			addRemark(id) {
				this.selectedId = id;
				this.$refs.setRemark.dialogVisible = true;
			},
			// 更改设备编号
			editDevice(item) {
				this.editItem = {
					orderId: item.id,
					deviceNumber: item.device_number ? item.device_number.split(',') : [],
					amount: item.amount
				}
				this.$refs.setDevice.dialogVisible = true;
			},
			// 修改地址
			editAddress(item) {
				this.editItem = {
					orderId: item.id,
					realname: item.realname,
					mobile: item.address_mobile,
					address: item.address,
					prov: item.prov,
					city: item.city,
					area: item.area,
					province: [item.prov, item.city, item.area]
				}
				this.$refs.setAddress.dialogVisible = true;
			},
			// 查看租期
			viewLease(id) {
				this.selectedId = id;
				this.$refs.checkLease.dialogVisible = true;
			},
			getOrderStatusType(status) {
				const obj = this.statusList.find(item => item.id == status);
				return obj ? obj.type : 'warning';
			},
			getOrderStatusName(status) {
				const obj = this.statusList.find(item => item.id == status);
				return obj ? obj.name : '';
			},
			// 获取数据
			getList(flag) {
				// flag为true, 则不刷新表格
				const {
					page,
					pageSize
				} = this.$refs.customPage;
				if (!flag) {
					this.tableData = [];
				}
				orderBuyOutList({
					page,
					pageSize,
					...this.searchForm,
					orderStatusGroup: this.activeName
				}).then(res => {
					const {
						list,
						count
					} = res;
					this.tableData = list.data || [];
					this.total = list.total || 0;
					for (let item of this.tabList) {
						item.count = count[item.id];
					}
				})
			},
			// 查询
			search() {
				const pickerVal = this.$refs.myDatePicker.getVal();
				if (pickerVal !== 'error') {
					this.searchForm.orderCreateTime = pickerVal;
					this.$refs.customPage.page = 1;
					this.getList();
				}
			},
			// 重置
			reset() {
				if (this.$refs.myDatePicker) {
					this.$refs.myDatePicker.reset();
				}
				this.searchForm = {
					orderNo: '',
					goodsName: '',
					receivingName: '',
					receivingMobile: '',
					riskName: '',
					riskMobile: '',
					orderCreateTime: ''
				};
				this.getList();
			},
			// 导出
			exportFile() {
				const pickerVal = this.$refs.myDatePicker.getVal();
				if (pickerVal !== 'error') {
					this.searchForm.orderCreateTime = pickerVal;
					orderBuyOutListExport({
						...this.searchForm,
						orderStatusGroup: this.activeName
					});
				}
			},
			handleClick(tab) {
				this.activeName = tab.name;
				this.$refs.customPage.page = 1;
				this.getList();
			}
		},
		mounted() {
			if (this.$route.params.orderId) {
				this.searchForm.orderNo = this.$route.params.orderId;
			}
			this.getList();
		}
	}
</script>
<style lang="scss" scoped>
	.common_form_search {
		padding: 15px 30px 0;
	}

	.child_page {
		padding-bottom: 15px;
		padding-left: 30px;
		padding-right: 30px;

		p,
		div {
			box-sizing: border-box;
		}
	}

	.list_wrap {
		position: relative;
	}

	.list_header {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		min-height: 50px;
		z-index: 2;
		background: #f5f5f5;
		border: 1px solid #e6e6e6;

		p {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
		}

		p:not(:first-child) {
			border-left: 1px solid #e6e6e6;
		}
	}

	.list_item {
		border: 1px solid #e6e6e6;
		margin-top: 10px;
	}

	.item_row {
		border-top: 1px solid #e6e6e6;

		&>div {
			padding: 10px;
			color: #666666;

			&:not(:first-child) {
				border-left: 1px solid #e6e6e6;
			}
		}
	}

	.detail,
	.btns {
		padding: 10px;
	}

	.btns {

		// border-left: 1px solid #e6e6e6;
		.el-button+.el-button {
			margin-left: 10px;
		}
	}

	.border-btn {
		height: 25px;
		padding-top: 0;
		padding-bottom: 0;
		background: #ffffff;
		border: 1px solid $mainBlue;
		border-radius: 3px;
		color: $mainBlue;
		font-size: 12px;
	}

	.sign_icons img {
		width: 21px;
		height: 23px;
		margin-right: 2px;
	}

	.item_header {
		padding: 5px 10px;
		background-color: #f5f5f5;

		&>div p {
			color: #666666;
			font-size: 12px;
			padding-left: 20px;
		}
	}

	.title {
		font-size: 16px;
		line-height: 23px;
		padding-bottom: 15px;
	}

	.meal,
	.device {
		font-size: 12px;
		color: #999999;
		line-height: 23px;
	}

	.item_row p {
		line-height: 23px;
	}

	.item_row div {
		line-height: 20px;
	}
</style>